<template>
	<view>
		<view class="work-container">
			<!-- 搜索框 -->
			<view class="search">
				<u-search placeholder="请输入..." v-model="searchKeyword" round :clearabled="true" :show-action="false" input-align="center" @search="handleSearch"></u-search>
			</view>
			<view class="tabs">
				<view class="tabs-tab">
					<u-tabs :list="list" :current="current" @change="change"></u-tabs>
				</view>
				<view class="calenderValue" @click="calenderValue = true">日期</view>
				<view class="dropdown">
					<u-dropdown @open="openDropdown">
						<u-dropdown-item v-model="dropdownValue" title="地区" :options="Nowprovince" height="500" @change="LocalChange"></u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
			<u-calendar v-model="calenderValue" :mode="mode" @change="changeRili"></u-calendar>
		</view> 
		<view class="mainContent">
			<view class="card" v-for="item in filteredList" :key="item.id">
				<view class="card-img">
					<u-image :src="item.cover" width="150px" height="100px" radius="20px"></u-image>
				</view>
				<view class="card-text">
					<view class="title">{{ item.name }}</view>
					<view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
					<view class="card-button">
						<view style="font-size: 13px;color: grey;display: flex;align-items: flex-end;">
							<view style="color: #0081ff">报名中 {{item.applyNumber}}</view>
							<view>/{{item.totalNumber}}</view>
						</view>
						<view class="buttonClass" v-if="item.status != '2'" @click="goXiangqing(item.id)">去报名</view>
						<view class="buttonClass" v-else>已截至</view>
					</view>
				</view>
			</view>
			<view v-if="filteredList.length < 1">
				<view style="font-size: 50rpx;text-align: center;">
					抱歉，目前没有活动
				</view>
				<view style="margin-top: 50rpx;">
					<u-button type="primary" plain :ripple="true" shape="circle" @click="goBackData">返回最新发布</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getMouthActivityList, getNewActivityList, getRiLiActivityList, getTodayActivityList,getLocalActivityList } from '../../api/Acitvity/Api'
export default {
    data() {
		const { data, province, city, area, town } = require('province-city-china/data');
        return {
            list: [
				{ name: '最新发布' },
				{ name: '今日' },
				{ name: '本月' }
			],
			current: 0,
			dropdownValue:1,
            searchKeyword: '' ,// 新增：用于存储搜索关键词
			calenderValue:false,
			mode: 'date',
			// 这是活动存放的数组
			DataList:[],	// 原始数据
			filteredList:[],    // 过滤后的数据
			// 所有省份
			Nowprovince:province.map(item => {
				item.value = item.name
				item.label = item.name;
				delete item.province
				delete item.name;
				delete item.code
				return item
			})
        }
    },
    methods: {
		change(index) {
			this.current = index
			this.searchKeyword = ''
			this.GetListData(this.current)
		},
		openDropdown(){
			const ss = document.querySelector('.u-dropdown__content__mask')
			if(ss){
				ss.remove()
			}
		},
		// 获取到 选择的日历
        changeRili(e) {
			console.log(e);
			getRiLiActivityList(e.result).then(res => {
				if(res.code == 200){
					this.DataList = res.rows
					this.searchKeyword = ''
					this.filteredList = [...this.DataList];
				}
			})
		},
		LocalChange(e){
			getLocalActivityList(e).then(res => {
				if(res.code == 200){
					this.DataList = res.rows
					this.searchKeyword = ''
					this.filteredList = [...this.DataList];
				}
			})
		},
		// 先获取最新发布的接口
		GetListData(id) {
			let apiCall;
			if(id == 0) apiCall = getNewActivityList();
			else if(id == 1) apiCall = getTodayActivityList();
			else if(id == 2) apiCall = getMouthActivityList();
			
			apiCall.then(res => {
				if(res.code == 200){
					this.DataList = res.rows;
					this.filteredList = [...this.DataList];
					// 如果有搜索关键词，执行搜索
					if(this.searchKeyword) this.handleSearch();
				}
			})
		},
		// 模糊搜索
		handleSearch(){
			if (!this.searchKeyword) {
				this.filteredList = [...this.DataList];
				return;
			}
			
			const keyword = this.searchKeyword.toLowerCase();
			this.filteredList = this.DataList.filter(item => {
				// 搜索活动名称和地区
				return (
					item.name.toLowerCase().includes(keyword)
			)})
		},
		goXiangqing(id){
			uni.navigateTo({
				url: `/pages/work/xiangqing/xiangqing?id=${id}`,
			  });
		},
		// 获取数据接口
		goBackData(){
			this.current = 0
			this.GetListData(0)
		}
    },
    onReachBottom() {

    },
    onLoad: function() {
		this.GetListData(0);
    }
}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #ffffff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}
	.search{
		padding:0 20px;
	}
	.tabs{
		display: flex;
		width: 100%;
		margin-top: 15px;
		justify-content: space-evenly;
		align-items: center;
	}
	.calenderValue{
		width:10%;
		line-height: 38px;	
	}
	.dropdown{
		width: 90px;
	}
	.u-dropdown__content__mask{
		background: none;
	}
	.mainContent{
		background-color: #bfbfbf5c;
		padding: 20px;
	}
	.card{
		background-color: #fff;
		height: 150px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding: 24px 20px;
		gap:12px;
		margin-bottom: 20px;
	}
	.card-img{
		border-radius: 20px;
	}
	.card-text{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: space-between;
	}
	.card-button{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.title{
		font-size: 15px;
		color: #000;
		font-weight: 550;
	}
	.time{
		font-size:12px;
		color:grey;
	}
	.buttonClass{
		background-color: skyblue;
		border-radius: 15px;
		padding: 5px;
	}
	.buttonClass:hover{
		background-color:#87ceeb75;
	}
</style>